<template>
	<view>

		<!-- 顶部筛选
			 -->
		<!-- 开启消息提示 -->
		<u-toast ref="uToast" />
		<u-collapse style="background-color:#FFFFFF;" >
			
			<u-collapse-item title="筛选" style="background-color:#FFFFFF;" :open="collapseTtemOpen" class="u-m-l-20 u-m-r-20">
				<!-- 线 -->
				<view class="collapse-item" style="background-color:#FFFFFF;">
					<u-line margin="1rpx" />
					<!-- 表单 -->
					<u-form :model="form" ref="uForm" class="u-text-center" label-position="top" >
						
						<u-form-item label="工作性质" >
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" v-for="(item, index) in natureOfWorkCheckBoxList" :key="index"
									:name="item.name">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<u-form-item label="学历要求">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" v-for="(item, index) in educationalRequirementsCheckBoxList" :key="index"
									:name="item.name">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<u-form-item label="薪资">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" v-for="(item, index) in salaryCheckBoxList" :key="index"
									:name="item.name">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>

					</u-form>
					
					
					<!-- 查找 MP  兼容 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序  -->
					<!-- #ifdef MP -->
						<u-button type="primary" class="u-m-t-30 u-m-l-10 u-m-r-10" @click="searchJob">查找</u-button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-button type="primary" class="u-m-t-50 u-m-l-20 u-m-r-20" @click="searchJob">查找</u-button>
					<!-- #endif -->
				</view>
			</u-collapse-item>
		</u-collapse>

		<!-- scroll-view滚动 -->
		<view class="page-box">
			<view class="order" v-for="job in jobsList" :key="job._id">
				<view class="item">
					<!-- <image :src="item.goodsUrl" mode="aspectFill"> -->
					<!-- <view class="left">图片</image></view> -->
					<view class="content">
						<view class="title u-line-2">{{job.job_name}}</view>
						<view class="type">{{job.educationalRequirements}}</view>
						<!-- <view class="type ">{{job.jobsList!='null'?job.jobsList[0].whole_company_name:''}}</view> -->
					</view>

					<view class="right">
						<view class="price u-m-r-10 u-font-16" style="color:#b53d25">
							{{job.job_salary}}
						</view>
						<u-button type="primary" size="mini" style="margin: 5px;" 
						@click="showModalAndSelectCompany(job.c_id,job)">申请</u-button>
					</view>
				</view>

			</view>
		</view>
		<!-- 确认框 -->
		<u-modal v-model="modelShow" :show-cancel-button="true" :content="content" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>
	</view>
</template>

<script>
	export default {
		name: 'hotjob',
		data() {
			name: 'hotjob'
			return {
				//数据
				jobsList:[],
				//工作性质筛选框内容
				natureOfWorkCheckBoxList: [
					// {
					// 	name: '不限',
					// 	checked: false,
					// 	disabled: false
					// },
					{
						name: '实习',
						checked: false,
						disabled: false
					},
					{
						name: '全职',
						checked: false,
						disabled: false
					}
				],
				//学历要求筛选框内容
				educationalRequirementsCheckBoxList: [
					// {
					// 	name: '不限',
					// 	checked: false,
					// 	disabled: false
					// },
					{
						name: '初中及其以下',
						checked: false,
						disabled: false
					},
					{
						name: '中专',
						checked: false,
						disabled: false
					},
					{
						name: '专科',
						checked: false,
						disabled: false
					},
					{
						name: '本科',
						checked: false,
						disabled: false
					},
					{
						name: '硕士',
						checked: false,
						disabled: false
					},
					{
						name: '博士',
						checked: false,
						disabled: false
					},
				],
				//薪资要求筛选框内容
				salaryCheckBoxList: [
					// {
					// 	name: '不限',
					// 	checked: false,
					// 	disabled: false
					// },
					{
						name: '1~3K',
						checked: false,
						disabled: false
					},
					{
						name: '3~5K',
						checked: false,
						disabled: false
					},
					{
						name: '5~8K',
						checked: false,
						disabled: false
					},
					{
						name: '8~12K',
						checked: false,
						disabled: false
					},
					{
						name: '12~20K',
						checked: false,
						disabled: false
					},
				],
				
				action: 'http://www.example.com/upload',
				form: {
					name: '',
					intro: ''
				},
				//控制筛选框收缩
				collapseTtemOpen:false,
				//模态框 确认框的显示与隐藏
				modelShow:false,
				//确认框内容
				content:'确定申请该岗位吗？',
				//接受公司名字
				companyName:'',
				//当前工作对象
				job:{},
			};
		},
		onLoad() {
		},
		onShow(){
			this.showAllJob()
		},
		computed: {

		},
		methods: {
		  searchJob(){
			 // console.log(this.natureOfWorkCheckBoxList)
			 // console.log(this.educationalRequirementsCheckBoxList)
			 // console.log(this.salaryCheckBoxList)
			 let natureOfWorkCheckBoxListArr=[];
			 for(let i=0;i<this.natureOfWorkCheckBoxList.length;i++){
				 if(this.natureOfWorkCheckBoxList[i].checked){
				 natureOfWorkCheckBoxListArr.push(this.natureOfWorkCheckBoxList[i].name)
				 }
			 }
			 let educationalRequirementsCheckBoxListArr=[];
			 for(let i=0;i<this.educationalRequirementsCheckBoxList.length;i++){
			 	  if(this.educationalRequirementsCheckBoxList[i].checked){
			 	educationalRequirementsCheckBoxListArr.push(this.educationalRequirementsCheckBoxList[i].name)
			 	}
			 }
			 let salaryCheckBoxListArr=[];
			 for(let i=0;i<this.salaryCheckBoxList.length;i++){
			 	  if(this.salaryCheckBoxList[i].checked){
			 	salaryCheckBoxListArr.push(this.salaryCheckBoxList[i].name)
			 	}
			 }
			 // console.log(natureOfWorkCheckBoxListArr)
			 //  console.log(educationalRequirementsCheckBoxListArr)
			 //   console.log(salaryCheckBoxListArr)
			   this.test(natureOfWorkCheckBoxListArr,educationalRequirementsCheckBoxListArr,salaryCheckBoxListArr);
			 //设置按钮
			this.collapseTtemOpen=true
			setTimeout(()=>{
				this.collapseTtemOpen=false
			},100)

			  
		  },
		  //查找所有job信息
			showAllJob(){
				uniCloud.callFunction({
								name: "job",
								data: {
									type: "showAllJob"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										// console.log("error！",res);
										return;
									}
									//成功
									//赋值
									// console.log(res.result.resData)
									this.jobsList=res.result.data.data
									// console.log(this.jobsList)
								},
								fail: (err) => {
									console.log(err)
								}
							})
			},
			//筛选查询
			test(natureOfWorkCheckBoxListArr,educationalRequirementsCheckBoxListArr,salaryCheckBoxListArr){
				// console.log(natureOfWorkCheckBoxListArr)
				// console.log(educationalRequirementsCheckBoxListArr)
				// console.log(salaryCheckBoxListArr)
				uniCloud.callFunction({
								name: "job",
								data: {
									data:'',
									natureOfWorkCheckBoxListArr:natureOfWorkCheckBoxListArr,
									educationalRequirementsCheckBoxListArr:educationalRequirementsCheckBoxListArr,
									salaryCheckBoxListArr:salaryCheckBoxListArr,
									type: "selectByArr"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										return;
									}
									//成功
									//赋值
									// console.log(res.result.data)
									//提示消息
									this.$refs.uToast.show({
											title: "查找成功！",
											type: 'success',//提示文字
											position:"top",
											icon:false,
											duration:'500',//时间
											})
									this.jobsList=res.result.data.data
									// console.log(this.jobsList)
								},
								fail: (err) => {
									console.log(err)
								}
							})
			},
			//申请
			applyJob(jobId,companyId){
				
					// console.log(jobId)
					// console.log(companyId)
					// console.log("申请了....")
					uniCloud.callFunction({
									name: "job",
									data: {
										jobId:jobId,
										companyId:companyId,
										type: "selectByArr"
									},
									success: (res) => {
										// console.log("error！",res);
										if(res.result.status!=200){
											return;
										}
										//成功
										//赋值
										// console.log(res.result.data)
										//提示消息
										this.$refs.uToast.show({
												title: "查找成功！",
												type: 'success',//提示文字
												position:"top",
												icon:false,
												duration:'500',//时间
												})
										this.jobsList=res.result.data.data
										// console.log(this.jobsList)
									},
									fail: (err) => {
										console.log(err)
									}
								})
			},
			//显示确认框并查找公司名字
			showModalAndSelectCompany(companyId,job) {
				// console.log("》》》》》》》》》》》》》》》》",job)
				this.job=job
				uniCloud.callFunction({
								name: "company",
								data: {
									_id:companyId,
									type: "selectById"
								},
								success: (res) => {
									console.log("error！",res);
									if(res.result.status!=200){
										return;
									}
									//成功
									//赋值
									// console.log(res.result.data)
									this.companyName=res.result.data.data[0].whole_company_name
									// console.log(this.companyName)
								},
								fail: (err) => {
									console.log(err)
								}
							})
				this.modelShow = true;
					},
			//格式化当前日期的写法
			getNowDate(){
				var nowDate = new Date();
				 var year = nowDate.getFullYear();
				 var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
				  : nowDate.getMonth() + 1;
				 var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
				  .getDate();
				 var dateStr = year + "-" + month + "-" + day;
				 return dateStr;
			},		
			confirm() {
				// console.log("》》》》》》》》》》》》》》》》",this.job)
				// console.log(this.getNowDate())
				// console.log(this.job.job_name)
						//在申请表插入一条数据
						uniCloud.callFunction({
										name: "apply",
										data: {
											user_id:uni.getStorageSync('storage_user')!=''?uni.getStorageSync('storage_user').data[0]._id:'',
											company_id:this.job.c_id,
											job_id:this.job._id,
											state:0,
											company_name:this.companyName,
											job_name:this.job.job_name,
											time:this.getNowDate(),
											type: "addApply"
										},
										success: (res) => {
											// console.log("error！",res);
											if(res.result.status!=200){
												return;
											}
											//成功
											//赋值
											// console.log(res.result.data)
											// this.companyName=res.result.data.data[0].whole_company_name
											// console.log(this.companyName)
										},
										fail: (err) => {
											console.log(err)
										}
									})
						setTimeout(() => {
							// 3秒后自动关闭
							this.modelShow = false;
							// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
							// this.$refs.uModal.clearLoading();
						}, 3000)
					}
		}
	};
</script>

<style>
	.collapse-item {
		color: red;
		background-color: #f2f2f2;
		padding-bottom: 10px;
	}

	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
	
</style>

<style lang="scss" scoped>
page{
	background: #f6f6f6;
}
.topbox{
	display: flex;
	background-color: #edf0f6;
	height: 200rpx;
}
.rightbox{
	flex:2;
	width:100%;
	/* background-color: #18B566; */
}
.leftbox{
	flex: 1;
	/* background-color: #82848A; */
	text-align: center;
	line-height: 200rpx;
}
.uni-scroll-view{
	height: 500rpx;
}
.footbox{
	position: fixed;
	bottom: 10rpx;
	height: 70rpx;
	right: 270rpx;
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
	
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			// background-color: yellow;
			width: 250px;
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.order .item .right[data-v-0535d882] {
    width: 290px;
}
</style>
